<template>
	<view class="container">
		<view class="tabs">
			<view @click="toggleTab(0)" class="tab" :class="{active: activeTabIndex == 0}">
				<view><text>未巡检任务</text><view v-if="uncheck.length">{{ uncheck.length }}</view></view>
			</view>
			<view @click="toggleTab(3)" class="tab" :class="{active: activeTabIndex == 3}">
				<view><text>未整改任务</text><view v-if="undo.length">{{ undo.length }}</view></view>
			</view>
			<view @click="toggleTab(4)" class="tab" :class="{active: activeTabIndex == 4}">
				<view><text>未验收任务</text><view v-if="unreceive.length">{{ unreceive.length }}</view></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="list">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="left">
					<view>巡检名称：{{ item.title }}</view>
					<view>巡检周期：{{ item.cycle }}</view>
					<view>起始时间：{{ item.from_day }}</view>
					<view>截止时间：{{ item.last_day }}</view>
					<view>请按时巡检，安全生产！</view>
				</view>
				<view class="right">
					<image src="../../static/fengxianxuncha/transfer.jpg"></image>
					<text>{{ activeTabIndex ? (activeTabIndex == 3 ? '未整改' : '未验收') : '未巡检' }}</text>
					<!-- <view class="transfer" @click="toCheck">点击巡检</view> -->
				</view>
			</view>
			<view class="none">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			activeTabIndex: 0,
			uncheck: [],
			undo: [],
			unreceive: [],
			list: []
		}
	},
	onLoad() {
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		// 获取数据
		this.getList(0, 1);
		this.getList(3);
		this.getList(4);
	},
	methods: {
		// 切换类型
		toggleTab(index){
			this.activeTabIndex = index;
			if(index == 0) this.list = this.uncheck;
			if(index == 3) this.list = this.undo;
			if(index == 4) this.list = this.unreceive;
		},
		// 获取巡检数据
		getList(status = 0, isDefault = false){
			let _this = this;
			uni.showLoading();
			uni.request({
				method: 'POST',
				url: _this.$API.normalCheck,
				data: {
					status,
					userid: uni.getStorageSync('userid')
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					
					// 判断
					let list = res.data.data.missions;
					if(status == 0) _this.uncheck = list;
					if(status == 3) _this.undo = list;
					if(status == 4) _this.unreceive = list;
					if(isDefault) _this.list = _this.uncheck;
				},
				fail: ()=>{
					uni.hideLoading();
				}
			})
		},
		// 点击巡检
		toCheck(){
			uni.showToast({
				icon: 'none',
				title: '请扫巡检点二维码'
			})
		}
	}
}
</script>

<style scoped>
/*tabs*/
.tabs{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80upx;
	background: #fff;
	overflow: hidden;
}
.tabs .tab{
	width: calc(100% / 3);
	height: 100%;
	color: #999;
	line-height: 80upx;
	text-align: center;
}
.tabs .tab>view{
	height: 80upx;
	line-height: 80upx;
	display: inline-block;
	position: relative;
}
.tabs .tab.active{
	color: #29A1E5;
}
.tabs .tab.active>view{
	display: inline-block;
	box-sizing: border-box;
}
.tabs .tab.active>view::after{
	content: '';
	width: 100%;
	height: 4upx;
	background: #29A1E5;
	position: absolute;
	bottom: 0;
	left: 0;
}
.tabs .tab>view view{
	display: inline-block;
	padding: 0 6upx;
	color: #fff;
	height: 28upx;
	line-height: 28upx;
	font-size: 20upx;
	background: #F47713;
	border-radius: 50%;
	position: absolute;
	top: 16upx;
	left: 130upx;
	z-index: 999;
}

/*列表*/
.list{
	padding: 20upx 20upx 0;
	height: calc(100vh - 80upx);
	box-sizing: border-box;
	overflow: hidden;
}
/* #ifdef H5 */
.list{
	height: calc(100vh - 80upx - 88upx);
}
/* #endif */
.list .item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 16upx;
	padding: 20upx;
	margin-bottom: 20upx;
}
.list .item .left{
	width: calc(100% - 160upx);
}
.list .item .left view{
	color: #444;
	font-size: 26upx;
}
.list .item .left view:first-child{
	padding-left: 20upx;
	position: relative;
}
.list .item .left view:first-child::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #F47713;
	position: absolute;
	top: 12upx;
	left: 0;
}
.list .item .right{
	width: 160upx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.list .item .right image{
	width: 80upx;
	height: 100upx;
}
.list .item .right text{
	color: #F47713;
}
.list .item .right .transfer{
	color: #fff;
	background: #FA8303;
	font-size: 26upx;
	width: 140upx;
	height: 50upx;
	line-height: 50upx;
	border-radius: 10upx;
	text-align: center;
	margin-top: 10upx;
}

.none{
	text-align: center;
	padding: 20upx 0;
	color: #999;
}
</style>
